<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>对局详情</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.css" rel="stylesheet">
  <style>
    html {
      min-height: 750px;
      min-width: 1100px;
      background-color: #222;
      user-select: none;
    }
    body { margin: 0px; }

    .background-pattern {
      position: fixed;
      z-index: -1;
      top: -1030px;
      left: -390px;
      opacity: 0.06;
      font-size: 50px;
      white-space: nowrap;
      line-height: 115px;
      filter: grayscale() drop-shadow(black 0px 0px 4px);
      transform-origin: center center;
      transform: rotate(45deg);
    }

    .header-menu {
      z-index: 2;
      display: flex;
      justify-content: stretch;
      align-items: center;
      position: fixed;
      top: 0px;
      height: 60px;
      min-width: 500px;
      width: 100%;
      background: linear-gradient(#484848 10%, #333 100%);
      filter: drop-shadow(#0008 0px 0px 20px);
      animation: game-bar-reveal 0.15s ease-in 0.5s forwards;
    }
    .main-title {
      margin-left: 10px;
      font-size: 40px;
      font-weight: bold;
      font-family: "Century Gothic";
      text-decoration: none;
      cursor: pointer;
    }
    .white-title {
      color: white;
      filter: drop-shadow(white 0px 0px 4px);
    }
    .blue-title {
      color: #9CF;
      filter: drop-shadow(#9CF 0px 0px 4px);
    }
    .red-title {
      color: #F99;
      filter: drop-shadow(#F99 0px 0px 4px);
    }
    .header-menu-item {
      filter: drop-shadow(#FFFA 0px 0px 7px);
      margin: 10px 20px;
      color: #FFF;
      font-size: 25px;
      cursor: pointer;
    }
    .main-menu-item-pressed { animation: main-menu-item-press 0.25s ease-in-out; }
    @keyframes main-menu-item-press {
      33% { transform: scale(0.8, 0.8); }
      66% { transform: scale(1.1, 1.1); }
      100% { transform: scale(1, 1); }
    }

    .game-viewer-frame {
      display: flex;
      justify-content: space-evenly;
    }

    .game-tracer {
      width: 640px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .chessboard-border {
      margin-top: 50px;
      align-self: flex-end;
      margin-bottom: 25px;
      transform: scale(0.8);
      transform-origin: center center;
      width: 600px;
      height: 600px;
      border: 20px solid #FFFD;
      filter: drop-shadow(#FFF8 0px 0px 8px);
      backdrop-filter: blur(5px);
    }
    .chessboard-grid {
      width: 550px;
      height: 550px;
      margin: 21px;
      border: 4px solid darkgray;
      background:
              repeating-linear-gradient(90deg, #FFF4 0%, #FFF4 0.3571%, #FFF1 0.3571%, #FFF0 3.5714%, #FFF1 6.7857%, #FFF4 6.7857%, #FFF4 7.1429%),
              repeating-linear-gradient(0deg, #FFF4 0%, #FFF4 0.3571%, #FFF1 0.3571%, #FFF0 3.5714%, #FFF1 6.7857%, #FFF4 6.7857%, #FFF4 7.1429%);
    }
    .chessboard-row {
      display: flex;
      position: relative;
      top: -596px;
      left: 3px;
    }

    .chess-piece {
      position: relative;
      margin: 5.75px;
      min-width: 28px;
      min-height: 28px;
      border-radius: 14px;
      box-sizing: border-box;
    }
    .chess-piece-white {
      background-color: white;
      filter: drop-shadow(#0008 0px 0px 3px);
    }
    .chess-piece-black {
      background-color: black;
      filter: drop-shadow(#FFF8 0px 0px 3px);
    }
    .chess-piece-white-winner { border: 5px solid #F88; }
    .chess-piece-black-winner { border: 5px solid #8CF; }

    .tracer-buttons {
      display: flex;
      position: absolute;
      margin-top: 655px;
      border-radius: 10px;
      border: #666 1px solid;
      overflow: hidden;
    }
    .tracer-button {
      margin: -1.5px;
      width: 60px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #EEE;
      background-color: #444;
    }
    .tracer-button:hover { background-color: #555; }
    .tracer-button:active { background-color: #333; }

    .main-scroll-wrapper {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      overflow: hidden;
      padding-left: 20px;
      width: calc(100% - 650px - 50px);
      min-width: 435px;
      max-width: 750px;
      min-height: 750px;
      max-height: 100vh;
      filter: drop-shadow(#0008 0px 0px 20px);
    }
    .main-scroll {
      box-sizing: border-box;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      max-width: 750px;
      overflow-y: scroll;
      min-height: 750px;
      max-height: 100vh;
      background-color: #333;
      border: #444 solid;
      border-width: 0px 1px;
    }
    .main-scroll-scrollbar-cover {
      position: relative;
      right: 0.5px;
      min-width: 25px;
      width: 25px;
      height: 100vh;
      min-height: 750px;
      background-color: #333;
      margin-left: -25px;
      z-index: 1;
    }

    .game-info {
      display: flex;
      justify-content: space-between;
      width: calc(100% - 50px);
      background-color: #282828;
      box-shadow: inset #0008 0px 0px 30px;
      border: #444 1px solid;
      border-radius: 10px;
      margin: 90px 0px 15px 0px;
      filter: grayscale();
    }
    .game-stats-info {
      margin: 20px;
      width: calc(33% - 40px);
    }
    .game-stats-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #888;
      margin: 2px 5px 3px 5px;
    }
    .game-operation-buttons {
      color: #EEE;
      display: flex;
      justify-content: space-between;
      background-color: #444;
      border: #666 1px solid;
      border-radius: 10px;
      filter: drop-shadow(#0008 0px 0px 10px);
      height: 28px;
    }
    .game-operation-button {
      cursor: pointer;
      margin: 13px 0px 0px 8px;
      display: flex;
    }
    .game-like-count {
      font-size: 16px;
      text-indent: 5px;
      white-space: nowrap;
    }
    .gamer-info {
      margin: 20px 20px 20px 0px;
      width: calc(33% - 20px);
      background-color: #2B2B2B;
      border: #555 1px solid;
      border-radius: 10px;
      filter: drop-shadow(#0008 0px 0px 10px);
    }
    .gamer-stats-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #888;
      margin: 6px 6px 6px 14px;
    }
    .gamer-name {
      color: #CCC;
      font-weight: bold;
      font-size: 20px;
      margin: 8px 10px 10px 10px;
      cursor: pointer;
    }

    .comment-editor-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 10px 0px 10px 0px;
      width: calc(100% - 50px);
      background-color: #282828;
      box-shadow: inset #0008 0px 0px 30px;
      border: #484848 1px solid;
      border-radius: 10px;
    }
    .comment-editor {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 15px 0px 0px 0px;
      width: calc(100% - 50px);
      height: 100px;
      background-color: #242424;
      box-shadow: inset #0008 0px 0px 30px;
      border: #484848 1px solid;
      border-radius: 10px;
      font-family: 'Courier New', Courier, monospace;
      padding: 10px;
      font-size: 18px;
      color: #777;
      outline: none;
      resize: none;
    }
    .comment-editor-buttons {
      display: flex;
      justify-content: flex-end;
      margin: 10px 0px 15px 20px;
      width: calc(100% - 50px);
      height: 30px;
    }
    .comment-editor-button {
      height: 30px;
      width: 90px;
      color: #DDD;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
      background-color: #404040;
      border: #666 1px solid;
      border-radius: 6px;
      cursor: pointer;
      filter: drop-shadow(#000 0px 0px 10px);
    }
    .comment-editor-button:hover { background-color: #555; }
    .comment-editor-button:active { background-color: #363636; }

    .panel-title {
      font-size: 20px;
      display: flex;
      align-items: center;
      color: #888;
      font-weight: lighter;
      width: calc(100% - 50px);
    }
    .refresh-button {
      cursor: pointer;
      visibility: hidden;
    }
    .panel-title:hover .refresh-button { visibility: visible; }

    .game-comments-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 10px 0px 30px 0px;
      width: calc(100% - 50px);
      background-color: #242424;
      box-shadow: inset #0004 0px 0px 30px;
      border: #444 1px solid;
      border-radius: 10px;
    }
    .game-comments-wrapper {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: calc(100% - 60px);
    }
    .no-displayed-items {
      font-size: 20px;
      font-weight: lighter;
      margin: 20px 0px -10px 0px;
      color: #555;
    }
    .game-comment-card {
      width: 100%;
      margin-top: 30px;
      color: #EEE;
      border: #555 1px solid;
      background-color: #333;
      border-radius: 10px;
      animation: comment-reveal 0.2s linear;
    }
    @keyframes comment-reveal {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    div.comment-header {
      display: flex;
      justify-content: space-between;
      margin: 20px 20px 0px 20px;
    }
    div.comment-title {
      font-size: 20px;
      font-weight: bold;
      text-align: justify;
      white-space: nowrap;
      overflow: hidden;
      flex-grow: 1;
      text-overflow: ellipsis;
      margin-right: 10px;
    }
    div.referencing-comment:hover .outer-comment-chessboard-button { visibility: visible; }
    div.referencing-parent-comment:hover .comment-chessboard-button { visibility: visible; }
    div.deletable-comment:hover .comment-delete-button { visibility: visible; }
    div.game-comment-card:hover .comment-reply-button { visibility: visible; }
    div.card-button {
      margin-top: 10px;
      color: #FFF4;
      font-size: 19px;
      visibility: collapse;
      cursor: pointer;
    }
    div.card-button:hover { color: #FFF8; }
    div.comment-content {
      font-size: 16px;
      text-align: justify;
      font-weight: lighter;
      margin: 15px 20px;
    }
    div.comment-footer {
      display: flex;
      justify-content: space-between;
      margin: -5px 20px 20px 20px;
    }
    div.author-and-date {
      color: #FFF5;
      font-family: 'Courier New', Courier, monospace;
      font-size: 16px;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 10px;
    }

    div.parent-comment {
      margin: 0px 20px 20px 20px;
      border: #FFF3 solid 1px;
      border-radius: 10px;
      padding: 10px;
      font-weight: lighter;
      text-align: justify;
      background: linear-gradient(45deg, #FFF1, #FFF2);
    }
    div.parent-comment-header {
      display: flex;
      justify-content: space-between;
    }
    div.parent-author-info {
      margin: 0px 0px 5px 0px;
      text-align: left;
    }

    .page-flipper {
      margin: 30px 0px;
      display: flex;
      width: 288px;
      justify-content: center;
      border-radius: 10px;
      border: #666 1px solid;
      overflow: hidden;
    }
    .page-input {
      width: 60px;
      box-sizing: border-box;
      background-color: #333;
      outline: none;
      border: #555 1px solid;
      text-align: center;
      color: #EEE;
      font-size: 16px;
    }
    .page-flipper-button {
      margin: -1.5px;
      width: 60px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #EEE;
      background-color: #444;
    }
    .page-flipper-button:not(.page-flipper-button-disabled):hover { background-color: #555; }
    .page-flipper-button:not(.page-flipper-button-disabled):active { background-color: #333; }
    .page-flipper-button-disabled { color: #888; }

    .popup-panel {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #0008;
      backdrop-filter: blur(20px);
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      z-index: 3;
      visibility: hidden;
    }
    .popup-panel-showing { animation: popup-panel-reveal 0.1s linear forwards; }
    @keyframes popup-panel-reveal {
      0% {
        opacity: 0;
        visibility: visible;
      }
      100% {
        opacity: 1;
        visibility: visible;
      }
    }
    .popup-panel-hiding { animation: popup-panel-hide 0.1s linear forwards; }
    @keyframes popup-panel-hide {
      0% {
        visibility: visible;
        opacity: 1;
      }
      99% {
        visibility: visible;
        opacity: 0;
      }
      100% {
        visibility: hidden;
        opacity: 0;
      }
    }
    .description-edit-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      position: fixed;
      width: 450px;
      height: 240px;
      backdrop-filter: blur(8px);
      background: linear-gradient(45deg, #FFF3, #FFF1);
      filter: drop-shadow(#FFF2 0px 0px 10px);
      border: 1px solid #FFF2;
      border-radius: 10px;
    }
    .login-panel-button {
      color: #FFF4;
      cursor: pointer;
    }
    .login-panel-button:hover { color: #FFF7; }
    .description-editor {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 50px 0px 0px 0px;
      width: calc(100% - 50px);
      height: 100px;
      background-color: #2228;
      box-shadow: inset #0008 0px 0px 30px;
      border: #555 1px solid;
      border-radius: 10px;
      font-family: 'Courier New', Courier, monospace;
      padding: 10px;
      font-size: 18px;
      color: #999;
      outline: none;
      resize: none;
    }
    .popup-button {
      background-color: transparent;
      background: linear-gradient(135deg, #FFF1, #FFF3);
      margin: 0px 0px -20px 0px;
      color: #FFFA;
      outline: none;
      border: 1px solid #FFF2;
      border-radius: 8px;
      margin-bottom: 10px;
      width: 98px;
      height: 35px;
    }
    .popup-button:hover { background: linear-gradient(135deg, #FFF2, #FFF4); }
    .popup-button:active { background: linear-gradient(135deg, #FFF1, #FFF2); }
  </style>
</head>
<body>
<div class="background-pattern">
  <script>
    for (let i = 0; i < 29; ++i) {
      for (let j = 0; j < 22; ++j) {
        let Rand = Math.random();
        if (Rand < 0.25)
          document.write("⚪　");
        else if (Rand < 0.75)
          document.write("🟢　");
        else
          document.write("🔵　");
      }
      document.write("<br/>");
    }
  </script>
</div>

<div class="header-menu">
  <a class="main-title" href="#"><span class="white-title">G</span><span class="blue-title">o</span><span class="white-title">m</span><span class="red-title">o</span><span class="white-title">Kult</span></a>
  <div style="flex-grow: 1;"></div>
  <div class="header-menu-item fa-solid fa-reply fa-lg" id="ReturnButton" title="返回上一页"></div>
  <div class="header-menu-item fa-solid fa-paper-plane fa-lg" id="ShareButton" title="复制分享链接"></div>
  <div class="header-menu-item fa-solid fa-user fa-lg" id="UserButton" title="个人主页"></div>
</div>

<div class="game-viewer-frame">
  <div style="width: 8px;"></div>
  <div class="game-tracer">
    <div class="chessboard-border">
      <div class="chessboard-grid"></div>
      <script>
        for (let x = 0; x < 15; ++x) {
          document.write(`<div class="chessboard-row">`);
          for (let y = 0; y < 15; ++y)
            document.write(`<div class="chess-piece chess-piece-enabled" coord="${x + "," + y}"></div>`);
          document.write(`</div>`);
        }
      </script>
    </div>
    <div class="tracer-buttons">
      <div class="tracer-button tracer-reset-button fa-solid fa-backward-fast fa-lg" title="重置棋盘"></div>
      <div class="tracer-button tracer-prior-button fa-solid fa-backward-step fa-lg" title="单步撤销"></div>
      <div class="tracer-button tracer-auto-play-button fa-solid fa-play fa-lg" title="启动/停止自动落子"></div>
      <div class="tracer-button tracer-next-button fa-solid fa-forward-step fa-lg" title="单步落子"></div>
      <div class="tracer-button tracer-last-button fa-solid fa-forward-fast fa-lg" title="最终局面"></div>
    </div>
  </div>

  <div class="main-scroll-wrapper">
    <div class="main-scroll">
      <div class="game-info">
        <div class="game-stats-info">
          <div class="game-stats-item" id="GameWinnerLabel" title="胜负信息">🟤 --</div>
          <div class="game-stats-item" id="GameDateLabel" title="对局日期">📆 ////-//-// //://</div>
          <div class="game-stats-item" id="GameDurationLabel" title="对局时长">⏱ --分--秒</div>
          <div class="game-stats-item" id="GameRoundsLabel" title="落子步数">🔄 共--步</div>
          <div class="game-operation-buttons">
            <!-- <div class="game-operation-button fa-solid fa-regular fa-heart fa-lg"></div> -->
            <div class="game-operation-button fa-regular fa-heart fa-lg" id="GameLikeButton" title="点赞/取消点赞">
              <div class="game-like-count" id="LikesCountLabel">--</div>
            </div>
            <div class="game-operation-button fa-solid fa-file-export fa-lg" id="GameDisplayButton" style="margin-right: 10px; display: none;" title="展示/取消展示到个人页面"></div>
            <!-- <div class="game-operation-button fa-solid fa-file-circle-xmark fa-lg"></div> -->
          </div>
        </div>
        <div class="gamer-info">
          <div class="gamer-stats-item gamer-name" id="BlackNicknameLabel">⚫ --</div>
          <div class="gamer-stats-item" id="BlackDurationLabel" title="棋手耗时">⏱ --分--秒</div>
          <div class="gamer-stats-item" id="BlackScoreLabel" title="积分变化">📊 --点（--点）</div>
          <div class="gamer-stats-item" id="BlackWinningRatioLabel" title="用户当前胜率">📈 --%（--%）</div>
        </div>
        <div class="gamer-info">
          <div class="gamer-stats-item gamer-name" id="WhiteNicknameLabel">⚪ --</div>
          <div class="gamer-stats-item" id="WhiteDurationLabel" title="棋手耗时">⏱ --分--秒</div>
          <div class="gamer-stats-item" id="WhiteScoreLabel" title="积分变化">📊 --点（--点）</div>
          <div class="gamer-stats-item" id="WhiteWinningRatioLabel" title="用户当前胜率">📈 --%（--%）</div>
        </div>
      </div>
      <div class="comment-editor-panel">
        <textarea class="comment-editor" id="CommentEditor" placeholder="由此编辑评论（最多输入200字）"></textarea>
        <div style="align-self: flex-start; margin: 5px 15px 0px 15px; font-size: 12px; color: #F66; display: none;" id="CommentEditorMessageLabel">评论字数超出长度限制（###>200）</div>
        <div class="comment-editor-buttons">
          <div class="comment-editor-button" id="ReferenceButton">引用局面</div>
          <div class="comment-editor-button" id="ClearButton">清除格式</div>
          <div class="comment-editor-button" id="PublishButton">发布评论</div>
        </div>
      </div>
      <div class="panel-title">
        <div id="CommentsHeaderLabel">用户评论（共0条）&ensp;</div>
        <div id="CommentRefreshButton" class="refresh-button fa-solid fa-rotate-right fa-lg"></div>
      </div>
      <div class="game-comments-panel">
        <div class="game-comments-wrapper">
          <!-- <div class="game-comment-card deletable-comment referencing-comment" comment-id="..." comment-author="...">
              <div class="comment-header">
                  <div class="comment-title">Lorem Ipsum</div>
                  <div class="card-button comment-chessboard-button outer-comment-chessboard-button fa-solid fa-chess-board fa-sm" title="复现局面（第35步）" referenced-rounds="35"></div>
                  <div class="card-button comment-delete-button fa-solid fa-trash-can fa-sm" title="删除评论" style="margin-left: 8px;"></div>
              </div>
              <div class="comment-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              <div class="parent-comment referencing-parent-comment">
                  <div class="parent-comment-header">
                      <div class="author-and-date parent-author-info">Redstone Heart, 2023-07-04 02:35</div>
                      <div class="card-button comment-chessboard-button fa-solid fa-chess-board fa-sm" title="复现局面（第20步）" referenced-rounds="20"></div>
                  </div>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </div>
              <div class="comment-footer">
                  <div class="card-button comment-reply-button fa-solid fa-comment fa-sm" title="回复评论"></div>
                  <div class="author-and-date">Redstone Heart, 2023-07-04 01:57</div>
              </div>
          </div>
          <div class="game-comment-card deletable-comment referencing-comment" comment-id="..." referenced-round="...">
              <div class="comment-header">
                  <div class="comment-title">Lorem Ipsum</div>
                  <div class="card-button comment-chessboard-button fa-solid fa-chess-board fa-sm"></div>
                  <div class="card-button comment-delete-button fa-solid fa-trash-can fa-sm" style="margin-left: 8px;"></div>
              </div>
              <div class="comment-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              <div class="parent-comment" style="display: flex; justify-content: center;">该评论已被删除</div>
              <div class="comment-footer">
                  <div class="card-button comment-reply-button fa-solid fa-comment fa-sm"></div>
                  <div class="author-and-date">Redstone Heart, 2023-07-04 01:57</div>
              </div>
          </div>
          <div class="game-comment-card deletable-comment referencing-comment" comment-id="..." referenced-round="...">
              <div class="comment-header">
                  <div class="comment-title">Lorem Ipsum</div>
                  <div class="card-button comment-chessboard-button fa-solid fa-chess-board fa-sm"></div>
                  <div class="card-button comment-delete-button fa-solid fa-trash-can fa-sm" style="margin-left: 8px;"></div>
              </div>
              <div class="comment-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
              <div class="comment-footer">
                  <div class="card-button comment-reply-button fa-solid fa-comment fa-sm"></div>
                  <div class="author-and-date">Redstone Heart, 2023-07-04 01:57</div>
              </div>
          </div> -->
          <div class="no-displayed-items">评论区为空</div>
        </div>
        <div class="page-flipper">
          <div id="PageFirstButton" class="page-flipper-button page-flipper-button-disabled page-first fa-solid fa-angles-left fa-lg" title="转到首页"></div>
          <div id="PagePriorButton" class="page-flipper-button page-flipper-button-disabled page-up fa-solid fa-angle-left fa-lg" title="上一页"></div>
          <input id="PageNumberBox" class="page-input" placeholder="页码" value="1"></input>
          <div id="PageNextButton" class="page-flipper-button page-flipper-button-disabled page-down fa-solid fa-angle-right fa-lg" title="下一页"></div>
          <div id="PageLastButton" class="page-flipper-button page-flipper-button-disabled page-last fa-solid fa-angles-right fa-lg" title="转到尾页"></div>
        </div>
      </div>
    </div>
    <div class="main-scroll-scrollbar-cover"></div>
  </div>
  <div style="width: 8px;"></div>
</div>

<div class="popup-panel">
  <div class="description-edit-panel">
    <div class="login-panel-button fa-solid fa-xmark fa-lg" id="ClosePanelButton" style="visibility: inherit; margin: 0px -410px -65px 0px;"></div>
    <textarea class="description-editor" id="DescriptionEditor" maxlength="200" placeholder="请输入该对局的推荐理由（最多输入200字）"></textarea>
    <input class="popup-button" id="AddDisplayButton" type="button" value="添加"/>
  </div>
</div>

<script>
  let GameID = 0, BlackID = 0, WhiteID = 0, PiecesString = "";
  for (let Attribute of window.location.href.split("?")[1].split("&"))
    if (Attribute.startsWith("game_id="))
      GameID = parseInt(Attribute.slice(8));

  function FormatDuration(duration) { return `${Math.floor(duration / 60)}分${Math.floor(duration % 60)}秒`; }
  function FormatDate(date) {
    let Year = date.getFullYear();
    let Month = (date.getMonth() < 9 ? "0" : "") + (date.getMonth() + 1);
    let Date = (date.getDate() < 10 ? "0" : "") + date.getDate();
    let Hours = (date.getHours() < 10 ? "0" : "") + date.getHours();
    let Minutes = (date.getMinutes() < 10 ? "0" : "") + date.getMinutes();
    return `${Year}-${Month}-${Date} ${Hours}:${Minutes}`;
  }

  let PiecesSequence = [];
  function ParseSequence(piece_string) {
    let Sequence = [];
    for (let Piece of new TextEncoder().encode(piece_string))
      Sequence.push([(Piece & 0xF0) >> 4, Piece & 0x0F]);
    return Sequence;
  }
  function LoadGameInfo() {
    $.post("/Gomokult_war_exploded/servlet/GetGameServlet", {
      gameID: GameID
    }, (data) => {
      if (data.startsWith("#"))
        return;
      let Game = JSON.parse(data);
      PiecesString = Game.piecesSequence;
      PiecesSequence = ParseSequence(PiecesString);

      let WinnerMapping = {"black": "⚫ 黑方获胜", "white": "⚪ 白方获胜", "draw": "🔘 双方平局"};
      GameWinnerLabel.innerHTML = WinnerMapping[Game.winner];
      GameDateLabel.innerHTML = `📆 ${FormatDate(new Date(Game.date))}`;
      GameDurationLabel.innerHTML = `⏱ ${FormatDuration(Game.blackDuration + Game.whiteDuration)}`;
      GameRoundsLabel.innerHTML = `🔄 ${Game.piecesSequence.length}`;

      BlackNicknameLabel.onclick = () => { window.location = `user_space.html?user_id=${Game.userBlack.userID}`; };
      BlackNicknameLabel.innerHTML = `⚫ ${Game.userBlack.nickname}`;
      BlackDurationLabel.innerHTML = `⏱ ${FormatDuration(Game.blackDuration)}`;
      BlackScoreLabel.innerHTML = `📊 ${Game.blackCounting}`;
      BlackWinningRatioLabel.innerHTML = `📈 ${(100 * Game.userBlack.winGames / Game.userBlack.totalGames).toFixed(2)}%（${Game.userBlack.winGames}/${Game.userBlack.totalGames}）`;

      WhiteNicknameLabel.onclick = () => { window.location = `user_space.html?user_id=${Game.userWhite.userID}`; };
      WhiteNicknameLabel.innerHTML = `⚪ ${Game.userWhite.nickname}`;
      WhiteDurationLabel.innerHTML = `⏱ ${FormatDuration(Game.whiteDuration)}`;
      WhiteScoreLabel.innerHTML = `📊 ${Game.whiteCounting}`;
      WhiteWinningRatioLabel.innerHTML = `📈 ${(100 * Game.userWhite.winGames / Game.userWhite.totalGames).toFixed(2)}%（${Game.userWhite.winGames}/${Game.userWhite.totalGames}）`;

      BlackID = Game.userBlack.userID;
      WhiteID = Game.userBlack.userID;
      if (BlackID == sessionStorage.getItem("CurrentUser") || WhiteID == sessionStorage.getItem("CurrentUser"))
        GameDisplayButton.style.display = "";
    });
  }
  function LoadOperationStates() {
    $.post("/Gomokult_war_exploded/servlet/GetLikeStateServlet", {
      userID: sessionStorage.getItem("CurrentUser"),
      gameID: GameID
    }, (state) => {
      if (state == "1") {
        let SelectedLikeButton = $("#GameLikeButton");
        SelectedLikeButton.removeClass("fa-regular");
        SelectedLikeButton.addClass("fa-solid");
      }
    });

    $.post("/Gomokult_war_exploded/servlet/GetLikesCountServlet", {
      gameID: GameID
    }, (count) => {
      if (!count.startsWith("#"))
        LikesCountLabel.innerHTML = count;
    });

    $.post("/Gomokult_war_exploded/servlet/GetGameDisplayStateServlet", {
      userID: sessionStorage.getItem("CurrentUser"),
      gameID: GameID
    }, (state) => {
      if (state == "1") {
        let SelectedDisplayButton = $("#GameDisplayButton");
        SelectedDisplayButton.removeClass("fa-file-export");
        SelectedDisplayButton.addClass("fa-file-circle-xmark");
      }
    });
  };
  LoadGameInfo();
  LoadOperationStates();

  ReturnButton.onclick = () => { window.history.back(); };
  UserButton.onclick = () => { window.location = `user_space.html?user_id=${sessionStorage.getItem("CurrentUser")}`; };
  ShareButton.onclick = () => {
    navigator.clipboard.writeText(this.location.href);
    let SelectedItem = $("#ShareButton");
    SelectedItem.addClass("main-menu-item-pressed");
    setTimeout(() => { SelectedItem.removeClass("main-menu-item-pressed"); }, 250);
  };

  let PiecesCount = 0;
  function ResetChess() {
    PiecesCount = 0;
    $(`.chess-piece`).addClass("chess-piece-enabled");
    for (let Class of ["black", "white", "black-winner", "white-winner"])
      $(`.chess-piece`).removeClass("chess-piece-" + Class);
  }
  function SwitchingDrop(x, y) {
    let TargetPiece = $(`.chess-piece[coord="${x + "," + y}"]`);
    if (TargetPiece.hasClass("chess-piece-black") || TargetPiece.hasClass("chess-piece-white"))
      return false;
    TargetPiece.addClass(`chess-piece-${++PiecesCount & 1 ? "black" : "white"}`);
    WinnerCheck(x, y);
    return true;
  }
  function SwitchingDropInverse(x, y) {
    let TargetPiece = $(`.chess-piece[coord="${x + "," + y}"]`);
    if (TargetPiece.hasClass("chess-piece-black") || TargetPiece.hasClass("chess-piece-white")) {
      TargetPiece.removeClass(`chess-piece-${--PiecesCount & 1 ? "white" : "black"}`);
      return true;
    }
    return false;
  }
  function PieceWeight(x, y) {
    let TargetPiece = $(`.chess-piece[coord="${x + "," + y}"]`);
    if (TargetPiece.hasClass("chess-piece-black"))
      return 1;
    if (TargetPiece.hasClass("chess-piece-white"))
      return -1;
    return 0;
  }
  const Biases = [[-4, 0, 1, 0], [-4, -4, 1, 1], [0, -4, 0, 1], [4, -4, -1, 1]]
  function WinnerCheck(x, y) {
    for (let Bias of Biases)
      for (let i = x + Bias[0], j = y + Bias[1], k = 0; k < 5; i += Bias[2], j += Bias[3], ++k) {
        let WeightSum = 0;
        for (let t = 0; t < 5; ++t)
          WeightSum += PieceWeight(i + t * Bias[2], j + t * Bias[3]);
        if (Math.abs(WeightSum) >= 5) {
          Winner = WeightSum > 0 ? "Black" : "White";
          for (let t = 0, m = i, n = j; t < 5; ++t, m += Bias[2], n += Bias[3])
            $(`.chess-piece[coord="${m},${n}"]`).addClass(`chess-piece-${Winner.toLowerCase()}-winner`);
          return Winner;
        }
      }
    if (PiecesCount >= 225)
      return "Draw";
    return "None";
  }

  let SequenceCursor = 0;
  let AutoPlayIntervalID = 0;
  // let PiecesString = `gxvXhizGeWw7'Fy{IY8ZkK<gxvXhizGeWw7'Fy{IY8ZkK<JjHL(*5$):9&[l+;`;
  // let PiecesString = `gwxhYyWXVE47G'iFHj9f*I)JK&8[©¹l(:Z¥U$e5utTSvC`;
  // let PiecesString = `gwxihfjkyzX\`;
  // let PiecesString = `gwxVvXWGet8)6iZfIhj'k|HJFE&7Yu954(U%DSdbB$¥¤¦´`;
  // let PiecesString = `wvfhuxX¨¹d`;
  // let PiecesString = `gwxVvXWGe6i%fF&DU¥`;
  // let PiecesString = `gwvxiez§k\X­{I:¥´TC[«Y`;
  // let PiecesString = `gwxihfXH8jkªU`;
  // let PiecesString = `wgXfUªyv§¸ct¶ÅÔ¦ÆµÄ¨VxwgXfUªyv§¸ct¶ÅÔ¦ÆµÄ¨VxhWI:u¥¤©`;
  // let PiecesString = `wgXfUªyv§¸ct¶ÅÔ¦ÆµÄ¨VxWh`;
  // let PiecesString = `gxvXhiefwZYyzWj¦¶{uH97&UVGF6%'8|}t§¸`;
  // let PiecesString = `gxvXhizGeWw7'Fy{IY8ZkK<J5$HjE`;
  // let PiecesString = `wghxvfX£§¦¶µyÄ`;
  // let PiecesString = `whyxijg¦µzfZKv`;
  // let PiecesString = `whyxij[¦g§·feª»zVEudU5¨¹©«¸ÇÖÈØèvstTDC`;
  // let PiecesString = `fwvuedW¢SBgtscVGRAUxX2bCQ`;
  // let PiecesString = `UeVfFxWHZiXwT`;
  // let PiecesString = `gvfewuTWH9hC2tijydD`;
  // let PiecesString = `CSDT4%5EF6&7()`;
  $(".tracer-reset-button").click(() => {
    let ResetButton = $(".tracer-reset-button");
    let AutoPlayButton = $(".tracer-auto-play-button");
    if (AutoPlayButton.hasClass("fa-pause"))
      AutoPlayButton.click();
    $(".chess-piece").removeClass("chess-piece-black-winner");
    $(".chess-piece").removeClass("chess-piece-white-winner");
    while (SequenceCursor > 0) {
      --SequenceCursor;
      SwitchingDropInverse(PiecesSequence[SequenceCursor][0], PiecesSequence[SequenceCursor][1]);
    }
  });
  $(".tracer-last-button").click(() => {
    let ResetButton = $(".tracer-last-button");
    let AutoPlayButton = $(".tracer-auto-play-button");
    if (AutoPlayButton.hasClass("fa-pause"))
      AutoPlayButton.click();
    while (SequenceCursor < PiecesSequence.length) {
      SwitchingDrop(PiecesSequence[SequenceCursor][0], PiecesSequence[SequenceCursor][1]);
      ++SequenceCursor;
    }
  });
  $(".tracer-auto-play-button").click(() => {
    let AutoPlayButton = $(".tracer-auto-play-button");
    AutoPlayButton.toggleClass("fa-pause");
    AutoPlayButton.toggleClass("fa-play");
    if (!AutoPlayButton.hasClass("fa-play")) {
      AutoPlayButton.css("background-color", "#333");
      AutoPlayIntervalID = setInterval(() => {
        if (SequenceCursor < PiecesSequence.length) {
          SwitchingDrop(PiecesSequence[SequenceCursor][0], PiecesSequence[SequenceCursor][1]);
          ++SequenceCursor;
        }
        else
          AutoPlayButton.click();
      }, 1000);
    }
    else {
      AutoPlayButton.css("background-color", "");
      clearInterval(AutoPlayIntervalID);
    }
  });
  $(".tracer-prior-button").click(() => {
    let ResetButton = $(".tracer-prior-button");
    let AutoPlayButton = $(".tracer-auto-play-button");
    if (AutoPlayButton.hasClass("fa-pause"))
      AutoPlayButton.click();
    $(".chess-piece").removeClass("chess-piece-black-winner");
    $(".chess-piece").removeClass("chess-piece-white-winner");
    if (SequenceCursor > 0) {
      --SequenceCursor;
      SwitchingDropInverse(PiecesSequence[SequenceCursor][0], PiecesSequence[SequenceCursor][1]);
    }
  });
  $(".tracer-next-button").click(() => {
    let ResetButton = $(".tracer-next-button");
    let AutoPlayButton = $(".tracer-auto-play-button");
    if (AutoPlayButton.hasClass("fa-pause"))
      AutoPlayButton.click();
    if (SequenceCursor < PiecesSequence.length) {
      SwitchingDrop(PiecesSequence[SequenceCursor][0], PiecesSequence[SequenceCursor][1]);
      ++SequenceCursor;
    }
  });

  function FastForward(to) {
    $(".tracer-reset-button").click();
    while (SequenceCursor < Math.min(to, PiecesSequence.length)) {
      SwitchingDrop(PiecesSequence[SequenceCursor][0], PiecesSequence[SequenceCursor][1]);
      ++SequenceCursor;
    }
  }

  GameLikeButton.onclick = () => {
    $.post("/Gomokult_war_exploded/servlet/SwitchLikeStateServlet", {
      userID: sessionStorage.getItem("CurrentUser"),
      gameID: GameID
    }, (data) => {
      if (data.startsWith("#"))
        return;

      let SelectedLikeButton = $("#GameLikeButton");
      SelectedLikeButton.toggleClass("fa-regular");
      SelectedLikeButton.toggleClass("fa-solid");

      $.post("/Gomokult_war_exploded/servlet/GetLikesCountServlet", {
        gameID: GameID
      }, (count) => {
        if (!data.startsWith("#"))
          LikesCountLabel.innerHTML = count;
      });
    });
  };
  GameDisplayButton.onclick = () => {
    if ($("#GameDisplayButton").hasClass("fa-file-export")) {
      $(".popup-panel").removeClass("popup-panel-hiding");
      $(".popup-panel").addClass("popup-panel-showing");
    }
    else
      $.post("/Gomokult_war_exploded/servlet/CancelDisplayedGameServlet", {
        userID: sessionStorage.getItem("CurrentUser"),
        gameID: GameID
      }, (data) => {
        if (data.startsWith("#"))
          return;
        let SelectedDisplayButton = $("#GameDisplayButton");
        SelectedDisplayButton.toggleClass("fa-file-export");
        SelectedDisplayButton.toggleClass("fa-file-circle-xmark");
      });
  };
  ClosePanelButton.onclick = () => {
    $(".popup-panel").removeClass("popup-panel-showing");
    $(".popup-panel").addClass("popup-panel-hiding");
  };
  AddDisplayButton.onclick = () => {
    $.post("/Gomokult_war_exploded/servlet/AddDisplayedGameServlet", {
      userID: sessionStorage.getItem("CurrentUser"),
      gameID: GameID,
      description: DescriptionEditor.value
    }, (data) => {
      ClosePanelButton.onclick();
      DescriptionEditor.value = "";
      let SelectedDisplayButton = $("#GameDisplayButton");
      SelectedDisplayButton.toggleClass("fa-file-export");
      SelectedDisplayButton.toggleClass("fa-file-circle-xmark");
    });
  };
  CommentRefreshButton.onclick = () => { ReloadComments(); };

  let MaxPagesCount = 0;
  function SetPageNumber(number) {
    PageNumberBox.value = Math.max(1, Math.min(MaxPagesCount, number));
    $("#PageFirstButton").removeClass("page-flipper-button-disabled");
    $("#PagePriorButton").removeClass("page-flipper-button-disabled");
    $("#PageNextButton").removeClass("page-flipper-button-disabled");
    $("#PageLastButton").removeClass("page-flipper-button-disabled");
    if (parseInt(PageNumberBox.value) <= 1) {
      $("#PageFirstButton").addClass("page-flipper-button-disabled");
      $("#PagePriorButton").addClass("page-flipper-button-disabled");
    }
    if (parseInt(PageNumberBox.value) >= MaxPagesCount) {
      $("#PageNextButton").addClass("page-flipper-button-disabled");
      $("#PageLastButton").addClass("page-flipper-button-disabled");
    }
  }
  function UpdateTotalPagesCount(callback = () => {}) {
    $.post("/Gomokult_war_exploded/servlet/GetCommentPagesCountServlet", {
      gameID: GameID
    }, (count) => {
      MaxPagesCount = parseInt(count);
      if (parseInt(PageNumberBox.value) > MaxPagesCount)
        SetPageNumber(MaxPagesCount);
      if (parseInt(PageNumberBox.value) == 0)
        SetPageNumber(1);
      callback();
    });
  }
  function ReloadComments() {
    if (MaxPagesCount == 0) {
      $(".game-comments-wrapper").html(`<div class="no-displayed-items">评论区为空</div>`);
      return;
    }
    $.post("/Gomokult_war_exploded/servlet/ReloadCommentsServlet", {
      "gameID": GameID,
      "page": PageNumberBox.value
    }, (data) => {
      CommentsData = JSON.parse(data)
      CommentsHeaderLabel.innerHTML = `用户评论（共${CommentsData.commentsCount}条）`;
      let HTML = "";
      for (let Comment of CommentsData.comments) {
        let Tokens = Comment.content.split("\n");
        let Content = Title = Tokens[0];
        if (Tokens.length > 1)
          Content = Comment.content.slice(CommentTitle.length + 1);
        HTML += `
							<div class="game-comment-card ${Comment.referencedRound > -1 ? "referencing-comment" : ""} ${Comment.publisher.userID == sessionStorage.getItem("CurrentUser") ? "deletable-comment" : ""}" comment-id="${Comment.commentID}" author-name="${Comment.publisher.nickname}">
								<div class="comment-header">
									<div class="comment-title">${Title}</div>
									<div class="card-button comment-chessboard-button outer-comment-chessboard-button fa-solid fa-chess-board fa-sm" title="复现局面（第${Comment.referencedRound}步）" referenced-rounds="${Comment.referencedRound}"></div>
									<div class="card-button comment-delete-button fa-solid fa-trash-can fa-sm" title="删除评论" style="margin-left: 8px;"></div>
								</div>
								<div class="comment-content">${Content}</div>
								${Comment.parentComment == null ? "" : Comment.parentComment == "deleted" ? `<div class="parent-comment" style="display: flex; justify-content: center;">该评论已被删除</div>` : `
									<div class="parent-comment ${Comment.parentComment.referencedRound > -1 ? "referencing-parent-comment" : ""}">
										<div class="parent-comment-header">
											<div class="author-and-date parent-author-info">${Comment.parentComment.publisher.nickname}, ${FormatDate(new Date(Comment.parentComment.date))}</div>
											<div class="card-button comment-chessboard-button fa-solid fa-chess-board fa-sm" title="复现局面（第${Comment.parentComment.referencedRound}步）" referenced-rounds="${Comment.parentComment.referencedRound}"></div>
										</div>
										${Comment.parentComment.content}
									</div>
								`}
								<div class="comment-footer">
									<div class="card-button comment-reply-button fa-solid fa-comment fa-sm" title="回复评论"></div>
									<div class="author-and-date">${Comment.publisher.nickname}, ${FormatDate(new Date(Comment.date))}</div>
								</div>
							</div>
						`;
      }
      $(".game-comments-wrapper").html(HTML);
      $(".comment-chessboard-button").click((event) => {
        FastForward(event.target.getAttribute("referenced-rounds"));
      });
      $(".comment-delete-button").click((event) => {
        $.post("/Gomokult_war_exploded/servlet/DeleteCommentServlet", {
          userID: sessionStorage.getItem("CurrentUser"),
          commentID: event.target.parentNode.parentNode.getAttribute("comment-id")
        }, (data) => {
          if (!data.startsWith("#"))
            UpdateTotalPagesCount(ReloadComments);
        });
      });
      $(".comment-reply-button").click((event) => {
        RepliedCommentID = parseInt(event.target.parentNode.parentNode.getAttribute("comment-id"));
        let RepliedAuthorName = event.target.parentNode.parentNode.getAttribute("author-name");
        CommentEditor.placeholder = CommentEditor.placeholder.replace(/.+(（.+）)$/g, `回复用户"${RepliedAuthorName}"$1`);
      });
    });
  }

  PageNumberBox.onchange = () => {
    UpdateTotalPagesCount(() => {
      SetPageNumber(parseInt(PageNumberBox.value));
      ReloadComments();
    });
  }
  PageFirstButton.onclick = () => {
    if (!$("#PageFirstButton").hasClass("page-flipper-button-disabled"))
      UpdateTotalPagesCount(() => {
        SetPageNumber(1);
        ReloadComments();
      });
  }
  PagePriorButton.onclick = () => {
    if (!$("#PagePriorButton").hasClass("page-flipper-button-disabled"))
      UpdateTotalPagesCount(() => {
        SetPageNumber(parseInt(PageNumberBox.value) - 1);
        ReloadComments();
      });
  }
  PageNextButton.onclick = () => {
    if (!$("#PageNextButton").hasClass("page-flipper-button-disabled"))
      UpdateTotalPagesCount(() => {
        SetPageNumber(parseInt(PageNumberBox.value) + 1);
        ReloadComments();
      });
  }
  PageLastButton.onclick = () => {
    if (!$("#PageLastButton").hasClass("page-flipper-button-disabled"))
      UpdateTotalPagesCount(() => {
        SetPageNumber(MaxPagesCount);
        ReloadComments();
      });
  }

  let ReferenceRounds = -1, RepliedCommentID = 0;
  ReferenceButton.onclick = () => {
    ReferenceRounds = SequenceCursor;
    CommentEditor.placeholder = CommentEditor.placeholder.replace(/（.+）$/g, `（已引用第${ReferenceRounds}步落子）`);
  };
  ClearButton.onclick = () => {
    ReferenceRounds = -1;
    RepliedCommentID = 0;
    CommentEditor.placeholder = "由此编辑评论（最多输入200字）";
  };
  PublishButton.onclick = () => {
    if (CommentEditor.value.length > 200) {
      CommentEditorMessageLabel.innerHTML = `评论字数超出长度限制（${CommentEditor.value.length}>200）`;
      CommentEditorMessageLabel.style.display = "";
      return;
    }
    CommentEditorMessageLabel.style.display = "none";
    $.post("/Gomokult_war_exploded/servlet/PublishCommentServlet", {
      userID: sessionStorage.getItem("CurrentUser"),
      gameID: GameID,
      content: CommentEditor.value,
      referencedRounds: ReferenceRounds,
      parentID: RepliedCommentID
    }, (data) => {
      UpdateTotalPagesCount(ReloadComments);
      CommentEditor.value = "";
    });
  };

  (function TryLogin() {
    let Email = null, Password = null;
    for (let Token of document.cookie.split(";"))
      if (Token.includes("GomokultEmail="))
        Email = Token.split("=")[1].slice(1, -1);
      else if (Token.includes("GomokultPassword="))
        Password = Token.split("=")[1].slice(1, -1);
    let SessionUser = sessionStorage.getItem("CurrentUser");
    if (Email != null && Password != null || SessionUser != null) {
      $.post("/Gomokult_war_exploded/servlet/LoginVerifyServlet", {
        email: Email,
        password: Password
      }, (message) => {
        result = message.split("#");
        if (parseInt(result[1]) >= 0 || SessionUser != null) {
          sessionStorage.setItem("CurrentUser", parseInt(SessionUser != null ? SessionUser : result[1]));
          sessionStorage.setItem("CurrentEmail", Email);
          UpdateTotalPagesCount(ReloadComments);
        }
        /* else
            window.location = "main_page.html"; */
      });
    }
    // window.location = "main_page.html";
  })();
</script>
</body>
</html>
